<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>EC BitMapText</title>
    <style>
        body{
            margin:0;
        }
        .movieclip{
            position: absolute;
            left:0;
            top:0;
            right:0;
            bottom: 0;
        }
    </style>
</head>

<body>
<div id="spin">loading</div>
<canvas id="canvas-shape" class="movieclip"></canvas>

<!-- build:js scripts/libs/easyrender.js -->
<script src="scripts/Base.js"></script>
<script src="scripts/ES6-promise.pollyfill.js"></script>
<script src="scripts/Utils.js"></script>
<script src="scripts/Event.js"></script>
<script src="scripts/Loader.js"></script>
<script src="scripts/RequestAnimationFrame.js"></script>
<script src="scripts/Ticker.js"></script>
<script src="scripts/Timer.js"></script>
<script src="scripts/Easing.js"></script>
<script src="scripts/Tween.js"></script>
<script src="scripts/Renderer.js"></script>
<script src="scripts/MovieClip.js"></script>
<script src="scripts/TouchEvent.js"></script>
<script src="scripts/Stats.js"></script>
<!-- endbuild -->

<script>

    var resConfig = RES.loadJson("images/number.json");
    resConfig.on("success", function(resData) {

        var loader = RES.loadGroup("preload", resData);
        var stage;

        loader.on("complete", function () {
            RES.el("#spin").style.display = "none";
            startGame();
        });

        function startGame() {
            var canvas = document.getElementById('canvas-shape');
            stage = new EC.Stage(canvas, {
                scaleMode: EC.isTouch ? 'showAll' : 'noScale',
                width: 750,
                height: 1334,
                showFps: true
            });

            stage.showFps({
                right: 0,
                left: "auto",
                top: 0
            });

            var bitMapText = new EC.BitMapText();
            bitMapText.font = "number";
            bitMapText.text = "123";
            bitMapText.x = 100;
            bitMapText.y = 100;
            bitMapText.width = 400;
            bitMapText.textAlign = 'center';
            bitMapText.letterSpacing = 5;
            stage.addChild(bitMapText);

            var timer = new EC.Timer(400);
            timer.on("timer", function () {
                bitMapText.text = Math.floor(100 + Math.random()*100000).toString();
                console.log(bitMapText.text);
            });
            timer.start();

        }

    });

</script>
</body>
</html>